import React, { PropsWithChildren, CSSProperties, useEffect, useRef } from "react";
import "./index.less";
import {message,Carousel} from "antd"
import {LeftOutlined,RightOutlined} from "@ant-design/icons"
import { Slider } from "@/typings/slider";

type Props=PropsWithChildren<{
    sliders:Slider[],
    getSliders:any
}>

function HomeSlider(props:Props) {
  useEffect(()=>{
      if(props.sliders.length===0){
        props.getSliders().catch((err:any)=>{
            message.error(err.response ? err.response.data.message : err.message);
        });
      }
  },[])
  let carouselDom=useRef(null)
  return (
      <div className="home-slider">
          <LeftOutlined className='c-carousel-arrow left' onClick={() => {
              (carouselDom.current as any).prev();
          }}/>
          <RightOutlined className='c-carousel-arrow right' onClick={()=>{
              (carouselDom.current as any).next();
          }}/>
    <Carousel effect="scrollx" autoplay ref={carouselDom}>
        {
            props.sliders.map((item:Slider,index:number)=>(
                <div className={"slider-img"} key={index}>
                    <img src={item.url}></img>
                </div>
            ))
        }
    </Carousel>
      </div>

  );
}

export default HomeSlider;
